@import org.silkframework.workspace.{Project, User}
@import org.silkframework.workspace.ProjectTask
@import org.silkframework.workspace.Workspace
@import org.silkframework.workspace.activity.ProjectActivity
@import org.silkframework.workspace.activity.TaskActivity
@import controllers.core.routes.{Assets => CoreAssets}
@import scala.runtime.BoxedUnit
@import controllers.workspace.routes.ActivityApi
@import controllers.workspace.routes.WorkspaceController
@import controllers.workspace.routes.Assets
@import org.silkframework.config.TaskSpec
@import org.silkframework.workspace.activity.CachedActivity

@**
 * Overview page of all activities and their status
 *@
@()(implicit session: play.api.mvc.Session)

@header = {
  <link rel="stylesheet" href="@CoreAssets.at("libs/jstree/style.min.css")" type="text/css" />
  <link rel="stylesheet" href="@Assets.at("workspace.css")" type="text/css" />
  <script src="@CoreAssets.at("libs/jstree/jstree.min.js")" type="text/javascript"></script>
  <script src="@Assets.at("workspace.js")" type="text/javascript"></script>
  <script type="text/javascript">
    $( window ).load(function () {
      $('#workspace_root').jstree()
      .on('before_open.jstree', function (e, data) {
        loadCometStream();
      });
      loadCometStream();
    });

    function loadCometStream() {
      $('#statusCometIFrame').html('<iframe src="@ActivityApi.activityUpdates("", "", "").url" style="display:none" frameborder="0" height="0" width="0"></iframe>')
    }

    function updateStatus(status) {
      // Get progress bar node
      var node = $(document.getElementById("progress_" + status.project + "_" + status.task + "_" + encodeURIComponent(status.activity).replace(/%20/g,'+')));
      var progressbar = node.find(".activity-progress-small");

      // Initialize progress bar
      if(progressbar.find(".ui-progressbar-value").length == 0) {
        progressbar.progressbar();
      }

      // Get child nodes
      var progressbarValue = progressbar.find(".ui-progressbar-value");
      var progressbarText = progressbar.find(".activity-progress-small-text");
      var progressbarHelp = progressbar.find(".activity-progress-small-help");

      // Update values
      progressbar.attr('title', status.message);
      if(status.failed) {
        progressbar.progressbar("option", {value: 100});
        progressbarValue.css({
          "background": '#FF5050'
        });
        progressbarText.text("Failed ");
        progressbarHelp.show();
      } else {
        progressbar.progressbar("option", {value: parseFloat(status.progress)});
        progressbarValue.css({
          "background": 'rgb(100, ' + Math.round(100 + status.progress * 1.55) + ', 100)'
        });
        progressbarText.text(status.message);
        progressbarHelp.hide();
      }

      // Update buttons
      if(status.statusName == "Canceling") {
        node.find(".activity-button-start").hide();
        node.find(".activity-button-stop").hide();
      } else if(status.isRunning) {
        node.find(".activity-button-start").hide();
        node.find(".activity-button-stop").show();
      } else {
        node.find(".activity-button-stop").hide();
        node.find(".activity-button-start").show();
      }
    }

    function post(url) {
      $.post(url).fail(function(request) { alert(request.responseText); })
    }
  </script>
}

@toolbar = {
}

@content = {
  @workspaceActivities(User().workspace)

  <div id="statusCometIFrame"></div>
}

@workspaceActivities(workspace: Workspace) = {
  <div id="workspace_root">
    <ul class="filetree">
    @for(project <- workspace.projects) {
      @projectActivities(project)
    }
    </ul>
  </div>
}

@projectActivities(project: Project) = {
  <li id="project_@project.name" class="jstree-open" >
    @project.name
    <ul>
    Project Activities
    @for(activity <- project.activities) {
      @projectActivityStatus(project, activity)
    }
    </ul>
    <ul>
    @for(task <- project.allTasks) {
      @taskActivities(project, task)
    }
    </ul>
  </li>
}

@taskActivities(project: Project, task: ProjectTask[_ <: TaskSpec]) = {
  <li id="task_@{project.name}_@task.id" class="jstree-open">
    @task.id
    <ul>
    @for(activity <- task.activities) {
      @taskActivityStatus(project, task, activity)
    }
    </ul>
  </li>
}

@projectActivityStatus(project: Project, activity: ProjectActivity) = {
  <li id="@id(project.name, "", activity.name)" data-jstree='{"icon":"@Assets.at("img/file-tag.png")"}'>
    @activity.name
    <div class="activity-progress-small">
      <div class="activity-progress-small-text"></div>
      <img class="activity-progress-small-help" src="@Assets.at("img/help.png")"/>
    </div>
    <div class="activity-button-start">
      <img title="Start activity" width="16" height="16" src="@Assets.at("img/control-start.png")" onclick="post('@ActivityApi.startActivity(project.name, "", activity.name, blocking = false).url')" />
    </div>
    <div class="activity-button-stop">
      <img title="Stop activity" width="16" height="16" src="@Assets.at("img/control-stop.png")" onclick="post('@ActivityApi.cancelActivity(project.name, "", activity.name).url')" />
    </div>
    @if(activity.config.nonEmpty) {
      <div class="activity-button-edit">
        <img title="Edit activity configuration" width="16" height="16" src="@Assets.at("img/wrench.png")" onclick="showDialog('@WorkspaceController.projectActivityConfigDialog(project.name, activity.name).url')" />
      </div>
    }
  </li>
}

@taskActivityStatus(project: Project, task: ProjectTask[_ <: TaskSpec], activity: TaskActivity[_, _]) = {
  <li id="@id(project.name, task.id, activity.name)" data-jstree='{"icon":"@Assets.at("img/file-tag.png")"}'>
    @activity.name
    <div class="activity-progress-small">
      <div class="activity-progress-small-text"></div>
      <img class="activity-progress-small-help" src="@Assets.at("img/help.png")"/>
    </div>
    <div class="activity-button-start">
      <img title="Start activity" width="16" height="16" src="@Assets.at("img/control-start.png")" onclick="post('@ActivityApi.startActivity(project.name, task.id, activity.name, blocking = false).url')" />
    </div>
    <div class="activity-button-stop">
      <img title="Stop activity" width="16" height="16" src="@Assets.at("img/control-stop.png")" onclick="post('@ActivityApi.cancelActivity(project.name, task.id, activity.name).url')" />
    </div>
    <div class="activity-button-edit">
      @if(activity.config.nonEmpty) {
        <img title="Edit activity configuration" width="16" height="16" src="@Assets.at("img/wrench.png")" onclick="showDialog('@WorkspaceController.taskActivityConfigDialog(project.name, task.id, activity.name).url')" />
      }
    </div>
    <div class="activity-button-value">
      @if(activity.valueType != classOf[BoxedUnit]) {
        <img title="Show current value" width="16" height="16" src="@Assets.at("img/magnifier.png")" onclick="window.open('@ActivityApi.getActivityValue(project.name, task.id, activity.name).url', '_blank')" />
      }
    </div>
    <div class="activity-button-reload">
    @if(classOf[CachedActivity[_]].isAssignableFrom(activity.control.underlying.getClass)) {
      <img title="Reload cache" width="16" height="16" src="@Assets.at("img/control-reload.png")" onclick="post('@ActivityApi.restartActivity(project.name, task.id, activity.name).url')" />
    }
    </div>
  </li>
}

@id(project: String, task: String, activity: String) = @{
  "progress_" + project + "_" + task + "_" + helper.urlEncode(activity)
}

@main(None, "activities")(header)(toolbar)(content)